import { Navigate, useNavigate } from "react-router-dom";
import Style from '@/assets/css/Login.module.scss'
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, KeyOutlined } from '@ant-design/icons';
import { login } from '@/network/api/user.js'
import { setCookie } from '@/utils/cookie.js'
import { setStorage } from '@/utils/html5.js'
import { GET_USER } from "@/redux/action";

//把dispatch注入props
import { connect } from "react-redux";


function Login(props) {
  let { dispatch } = props;

  //antd   message实例
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();


  //登录操作
  const onFinish = async (values) => {
    let result = await login(values);

    //登陆成功
    if (result.data.code === 400) {
      messageApi.info('用户名或密码错误');
      return;
    }

    //登陆失败
    if (result.data.code === 200) {
      messageApi.info('登录成功');

      // dispatch({ type: DEL_MENU, payload: '' });

      // dispatch({ type: DEL_USER, payload: '' });

      setCookie('_token', result.data.data.token);
      setStorage('menu', result.data.data.authResource);
      setStorage('user', result.data.data.authUserinfo);
      dispatch({ type: GET_USER, payload: result.data.data.authUserinfo });
      navigate('/', { replace: true, state: "路由state" })
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className={Style.login}>
      {contextHolder}
      <div className={Style.model}>
        <div className={Style.title}>
          <p >
            99999秦务员政务服务热线
          </p>
        </div>
        <div className={Style.form}>
          <Form
            name="basic"

            wrapperCol={{
              span: 24,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入您的用户名',
                },
              ]}
            >
              <Input allowClear size="large" placeholder='用户名' prefix={<UserOutlined />} />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入您的密码',
                },
              ]}
            >
              <Input.Password placeholder='密码' size="large" prefix={<KeyOutlined rotate={135} />} />
            </Form.Item>


            <div className={Style.button}>
              <div className={Style.login}>
                <Button type="primary" htmlType="submit" block>
                  登录
                </Button>
              </div>
              <div className={Style.signUp}>
                <Button type="primary" block>
                  注册
                </Button>
              </div>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default connect()(Login);
